<template>
    <div id="box" class="container">
        <navigate>
            <template slot="link">
                <router-link to="/recommend/hot" active-class="active" tag="li">热门</router-link>
                <router-link to="/recommend/chart" active-class="active" tag="li" exact>排行榜</router-link>
                <router-link to="/recommend/album" active-class="active" tag="li" exact>歌单</router-link>
            </template>
        </navigate>
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</template>

<script>
import navigate from '../components/Navigate'

export default {
   components: {
       navigate
   } 
}
</script>

<style lang="scss" scoped>
    .container {
        min-height: calc(100vh - 240px);
    }
</style>